<template>
  <div class="person">
    <input v-model="firstName" type="text" placeholder="First Name" />
    <input v-model="lastNmae" type="text" placeholder="Last Name" />
    {{ computedName }}
  </div>
</template>

<!-- toRefs和toRef是把reactive定义的对象转换成ref,同时修改了数据后会追奔复原，原始的数据也会改变 -->
<script lang="ts" setup name="Person">
import { ref, computed } from 'vue'
const firstName = ref('zll')
const lastNmae = ref('linli')

let computedName = computed(() => {
  return `${firstName.value}--${lastNmae.value}`
})
</script>
